<template>
	<view class="detail">
		<view class="container">
			<!-- 
			方案一unicloud-db <unicloud-db> 组件是一个数据库查询组件，它是对clientDB的js库的再封装。
			 查询条件，对记录进行过滤
			查询状态（失败、联网中）及结果（data）
			指定查询结果是否仅返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要[0]的方式获取。在值为 true 时，直接返回结果数据，少一层数组，一般用于非列表页，比如详情页
			表名。支持输入多个表名，用 , 分割，自HBuilderX 3.2.6起也支持传入tempCollection组成的数组
			 -->
			<view class="" v-if="false">
				<unicloud-db :where="`_id=='${artId}'`" v-slot:default="{ data, loading, error, options }" getone
					:collection="collections">
					<view v-if="error">{{ error.message }}</view>
					<view v-else-if="loading">
						<u-skeleton rows="4" title loading></u-skeleton>
					</view>
					<view v-else>
						<view class="title">{{ data.title }}</view>
						<view class="userinfo">
							<view class="avatar">
								<image src="../../static/images/user-default.jpg" mode="aspectFill"></image>
							</view>
							<view class="text">
								<view class="name">
									{{ data.user_id[0].nickname ? data.user_id[0].nickname : data.user_id[0].username }}
								</view>
								<view class="small">
									<uni-dateformat :date="data.publish_date"
										format="yyyy年MM月dd hh:mm:ss"></uni-dateformat>
									· {{ data.cityStr }}
								</view>
							</view>
						</view>

						<view class="content">
							<u-parse :content="data.content" :tagStyle="tagStyle"></u-parse>
						</view>
						<view class="like">
							<view class="btn">
								<text class="iconfont icon-good-fill"></text>
								<text>88</text>
							</view>
							<view class="users">
								<image src="../../static/images/user.jpg" mode="aspectFill"></image>
							</view>
							<view class="text">
								<text class="num">998</text>
								人看过
							</view>
						</view>
					</view>
				</unicloud-db>
			</view>
			<!-- 传统方案 -->
			<view v-else>
				<view v-if="loadingState">
					<u-skeleton rows="4" title loading></u-skeleton>
				</view>
				<view v-else>
					<view class="title">{{ data.title }}</view>
					<view class="userinfo">
						<view class="avatar">
							<image :src="giveAvatar(data)" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view class="name">{{ giveName(data) }}</view>
							<view class="small">
								<uni-dateformat :date="data.publish_date" format="yyyy年MM月dd hh:mm:ss"></uni-dateformat>
								· {{ data.cityStr }}
							</view>
						</view>
					</view>
					<view class="content">
						<u-parse :content="data.content" :tagStyle="tagStyle"></u-parse>
					</view>
					<view class="like">
						<view class="btn" @click="likeChange" :class="isLike ? 'active' : ''">
							<text class="iconfont icon-good-fill"></text>
							<text>{{ data.like_count ? data.like_count : '点赞' }}</text>
						</view>
						<view class="users">
							<template v-for="item in likeUserArr">
								<image v-if="item.user_id[0].avatar_file" :src="giveAvatar(item)" mode="aspectFill">
								</image>
							</template>
						</view>
						<view class="text">
							<text class="num">{{ data.view_count }}</text>
							人看过
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<view v-if="!commentList.length && noComment">
				<u-empty mode="comment" icon="http://cdn.uviewui.com/uview/empty/comment.png"></u-empty>
			</view>
			<view class="content" v-else>
				<view class="item" v-for="item in commentList">
					<comment-item :item="item" @removeFun="removeFun"></comment-item>
				</view>
			</view>
		</view>
		<comment-frame :commentObj="commentObj" @commentChange="commentChange"></comment-frame>
	</view>
</template>

<script>
	import {
		giveName,
		giveAvatar,
		likeFun
	} from '../../utils/tools.js';
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import pageJson from '@/pages.json';

	const db = uniCloud.database();
	// 引入云对象
	const utilsObj = uniCloud.importObject('utilsObj', {
		// 移除自带loadding
		customUI: true
	});
	export default {
		data() {
			return {
				// [主表文章表（user_id）关联 副表用户表（_id) ],连表查询获取获取用户信息
				collections: [db.collection('quanzi_artcle').getTemp(), db.collection('uni-id-users').field(
					'_id,username,avatar_file,nickname').getTemp()],
				artId: '',
				tagStyle: {
					p: 'line-height:1.7em; font-size:16px;  padding-bottom:10rpx;',
					img: 'margin: 10rpx 0;'
				},
				loadingState: true,
				data: {},
				isLike: false,
				likeTime: '',
				likeUserArr: [],
				commentObj: {
					article_id: '',
					comment_type: 0
				},
				commentList: [],
				noComment: false
			};
		},
		onLoad(e) {
			if (e.id) {
				this.artId = e.id;
				this.commentObj.article_id = e.id;
				this.getData();
				this.ReadUpdate();
				this.getLikeUser();
				this.getCcomment();
				return;
			}
			this.errChange();
		},
		methods: {
			giveName,
			giveAvatar,
			// 删除
			removeFun(res) {
				let index = this.commentList.findIndex((item) => item._id == res.id);
				console.log(index, res, index);
				this.commentList.splice(index, 1);
			},
			// 评论后的回调
			commentChange(res) {
				console.log(res);
				// 无感刷新
				this.commentList.unshift({
					...res,
					article_id: this.artId,
					comment_type: 0,
					user_id: [store.userInfo]
				});
			},
			// 获取评论列表
			async getCcomment() {
				let commentTemp = db.collection('quanzi-comment').where(
						`article_id=='${this.artId}' && comment_type==0`).orderBy('comment_date desc').limit(5)
					.getTemp();
				let userTemp = db.collection('uni-id-users').field('_id,username,avatar_file,nickname').getTemp();
				let res = await db.collection(commentTemp, userTemp).get();
				console.log(res, '评论');

				// 获取评论的id数组
				let idArr = res.result.data.map(item => item._id)
				console.log(idArr);

				// 获取所有一级回复对应二级回复的个数
				let replayArr = await db.collection("quanzi-comment").where({
					// in 查询筛选操作符，表示要求值在给定的数组内。(被回复的评论ID 是否在文章列表中 )
					reply_comment_id: db.command.in(idArr)
					// 使用count方法可以对记录数量进行统计。
				}).groupBy('reply_comment_id').groupField('count(*) as totalStudents').get()
				console.log(replayArr, 'replayArr');


				res.result.data.forEach(item => {
					// 找到列表中对应文章的索引
					let index = replayArr.result.data.findIndex(find => {
						return find.reply_comment_id == item._id
					})
					// 根据索引取出对应数据的回复数量
					if (index > -1) {
						item.totalStudents = replayArr.result.data[index].totalStudents
					}
				})



				// 真正没有数据时才展示暂无评论
				if (res.result.data.length == 0) {
					this.noComment = true;
				}
				this.commentList = res.result.data;
			},
			// 	获取点赞头像
			async getLikeUser() {
				try {
					// 获取临时表点赞表
					let likeTemp = await db.collection('quanzi_like').where(`article_id=="${this.artId}" `).getTemp();
					// 获取临时表用户表
					let userTemp = await db.collection('uni-id-users').field('_id,avatar_file').getTemp();
					//联表查询获取点赞的头像 （时间排序，最多五条）
					let res = await db.collection(likeTemp, userTemp).orderBy('publish_date', 'desc').limit(5).get();
					console.log('res', res);
					// 数据翻转
					res.result.data = res.result.data.reverse();
					this.likeUserArr = res.result.data;
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			},
			// 点赞事件
			async likeChange() {
				// 没有登录
				if (!store.hasLogin) {
					uni.showModal({
						title: '是否确认登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/' + pageJson.uniIdRouter.loginPage
								});
							}
						}
					});
					return;
				}
				// 带赞防抖
				let time = Date.now();
				if (time - this.likeTime < 30000) {
					uni.showToast({
						title: '操作太频繁了，请稍后重试...',
						icon: 'none'
					});
					return;
				}
				this.likeTime = time;
				this.isLike ? this.data.like_count-- : this.data.like_count++;
				this.isLike = !this.isLike;

				likeFun(this.artId);
			},
			// 错误跳转
			errChange() {
				uni.showToast({
					icon: 'none',
					title: '参数有误'
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}, 800);
			},
			// 获取数据
			// 文章表主表：user_id 绑定 副表 用户表: _id ==== 主表（文章表）某字段foreignKey（user_id）指向副表（用户表:_id）时

			// 一个主表字段可能对应多个副表字段的foreignKey
			// 文章表主表: article_id 绑定 副表 点赞表：_id ===== 副表(点赞表)某字段foreignKey（article_id）指向主表（文章表：_id）时

			// 三表联查 登陆用户有没有给某一篇文章点赞
			/**
			 *{
				title:文章表字段
				user_id：{[]} // 主表 （文章表） 内foreignKey（user_id）指向副表用户表的字段名：用户数据
				_id:{ 主表（文章表）内被副表（点赞表）foreignKey（_id）指向的字段名
					quanzi_like:[{}] "副表1表名（点赞表）“：副表1数据
					_value："" //主表字段原始值 (文章表id)
				}

			 }
			 */

			async getData() {
				try {
					// 查询该用户的文章，查询条件为文章id
					let artTemp = db.collection('quanzi_artcle').where(`_id=='${this.artId}'`).getTemp();
					// 过滤用户表字段
					let userTemp = db.collection('uni-id-users').field('_id,username,avatar_file,nickname').getTemp();
					// 获取点赞表
					let likeTemp = db.collection('quanzi_like').where(
						`article_id=="${this.artId}" && user_id==$cloudEnv_uid`).getTemp();

					let tempArr = [artTemp, userTemp];
					//登录后在查询点赞
					if (store.hasLogin) {
						tempArr.push(likeTemp);
					}

					// 三表连查 获取单条数据
					let res = await db.collection(...tempArr).get({
						getOne: true
					});

					// 没有数据
					if (!res.result.data) {
						this.errChange();
						return;
					}
					this.data = res.result.data;
					// 是否点赞 登录过看有没有点赞
					if (store.hasLogin) {
						this.isLike = this.data._id?.quanzi_like?.length ? true : false;
					} else {
						this.isLike = false;
					}

					uni.setNavigationBarTitle({
						title: this.data.title
					});
					this.loadingState = false;
				} catch (e) {
					//TODO handle the exception
					// 网络异常
					// this.errChange();
				}
			},
			// 更新阅读量
			async ReadUpdate() {
				let res = await utilsObj.operation('quanzi_artcle', 'view_count', this.artId, 1);
			}
		}
	};
</script>

<style lang="scss">
	.detail {
		// 默认背景色
		background: #f8f8f8;

		// 适配高度
		min-height: calc(100vh - var(--window-top));

		// 	评论区域
		.comment {
			padding: 32rpx;
			padding-bottom: 120rpx;
		}

		// 文章区域
		.container {
			padding: 30rpx;
			background: #fff;

			// 标题
			.title {
				font-size: 46rpx;
				color: #333;
				line-height: 1.4em;
				font-weight: 600;
			}

			//用户信息
			.userinfo {
				padding: 20rpx 0 50rpx;
				display: flex;
				align-items: center;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					padding-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					font-size: 28rpx;
					color: #555;

					.small {
						font-size: 20rpx;
						color: #999;
					}
				}
			}

			// 富文本
			.content {}

			// 点赞区域
			.like {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 80rpx 50rpx 50rpx;

				.btn {
					width: 260rpx;
					height: 120rpx;
					background: #e4e4e4;
					border-radius: 100rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 28rpx;

					.iconfont {
						font-size: 50rpx;
					}

					// 点赞后类名
					&.active {
						background: #0199fe;
					}
				}

				.text {
					font-size: 26rpx;
					color: #666;

					.num {
						color: #0199fe;
					}

					.spot {
						padding: 0 10rpx;
					}
				}

				.users {
					display: flex;
					justify-content: center;
					padding: 30rpx 0;

					image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						border: 3px solid #fff;
						margin-left: -20rpx;
					}
				}
			}
		}
	}
</style>